<template>
  <div class="code-input-container">
    <!-- 输入框容器 -->
    <div class="code-input-box">
      <input
        v-for="(digit, index) in codeArray"
        :key="index"
        :value="digit"
        :ref="el => inputs[index] = el"
        type="text"
        maxlength="1"
        class="code-input"
        :class="{ 'filled': digit, 'shake': shakeIndex === index }"
        @input="handleInput($event, index)"
        @keydown="handleKeydown($event, index)"
        @focus="handleFocus(index)"
        @paste="handlePaste($event)"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'CodeInput',
  props: {
    length: {
      type: Number,
      default: 6 // 默认验证码长度为 6
    }
  },
  data()
  {
    return {
      codeArray: [], // 存储每个输入框的值
      inputs: [], // 存储 input 元素的引用
      activeIndex: 0, // 当前聚焦的输入框索引
      shakeIndex: null // 触发抖动动画的输入框索引
    }
  },
  created()
  {
    // 初始化 codeArray
    this.codeArray = Array(this.length).fill('')
    console.log('CodeInput initialized with length:', this.length)
  },
  mounted()
  {
    // 组件挂载后自动聚焦到第一个输入框
    this.inputs[0]?.focus()
    console.log('First input focused')
  },
  methods: {
    // 处理输入
    handleInput(event, index)
    {
      const value = event.target.value.trim()
      console.log(`Input at index ${index}: ${value}`)

      // 只接受数字
      if (!/^\d*$/.test(value))
      {
        this.codeArray[index] = ''
        event.target.value = ''
        return
      }

      // 触发抖动动画
      this.shakeIndex = index

      // 更新当前格子
      this.codeArray[index] = value
      this.$forceUpdate() // 强制更新视图

      // 如果输入了数字，自动聚焦到下一个输入框
      if (value && index < this.length - 1)
      {
        this.activeIndex = index + 1
        this.inputs[this.activeIndex]?.focus()
      }

      // 如果所有格子都填满，触发完成事件
      if (this.codeArray.every(digit => digit))
      {
        const code = this.codeArray.join('')
        console.log('Code completed:', code)
        this.$emit('complete', code)
      }
    },

    // 处理键盘按下事件（支持删除）
    handleKeydown(event, index)
    {
      if (event.key === 'Backspace')
      {
        event.preventDefault() // 阻止默认删除行为
        console.log(`Backspace pressed at index ${index}`)

        // 如果当前格子有值，清空当前格子并触发抖动
        if (this.codeArray[index])
        {
          this.shakeIndex = index
          this.codeArray[index] = ''
          this.$forceUpdate()
        }
        else if (index > 0)
        {
          // 如果当前格子为空，聚焦到上一个格子并清空
          this.activeIndex = index - 1
          this.shakeIndex = this.activeIndex
          this.codeArray[this.activeIndex] = ''
          this.inputs[this.activeIndex]?.focus()
          this.$forceUpdate()
        }
      }
    },

    // 处理聚焦
    handleFocus(index)
    {
      this.activeIndex = index
      console.log(`Focused on index ${index}`)

      // 如果当前格子有值，聚焦时清空并触发抖动
      if (this.codeArray[index])
      {
        this.shakeIndex = index
        this.codeArray[index] = ''
        this.$forceUpdate()
      }
    },

    // 处理粘贴
    handlePaste(event)
    {
      event.preventDefault()
      const pastedText = (event.clipboardData || window.clipboardData).getData('text')
      const digits = pastedText.match(/\d/g) || [] // 提取数字
      console.log('Pasted digits:', digits)

      if (digits.length > 0)
      {
        // 填充数字到格子
        for (let i = 0; i < this.length && i < digits.length; i++)
        {
          this.codeArray[i] = digits[i]
          this.shakeIndex = i // 每个填充的格子都触发抖动
          this.$forceUpdate()
        }

        // 聚焦到最后一个非空格子或最后一个格子
        const lastFilledIndex = this.codeArray.lastIndexOf('') === -1 ? this.length - 1 : Math.max(0, this.codeArray.lastIndexOf('') - 1)
        this.activeIndex = lastFilledIndex
        this.inputs[this.activeIndex]?.focus()

        // 如果填满，触发完成事件
        if (this.codeArray.every(digit => digit))
        {
          const code = this.codeArray.join('')
          console.log('Code completed after paste:', code)
          this.$emit('complete', code)
        }
      }
    }
  }
}
</script>

<style scoped>
.code-input-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  padding: 10px;
  background-color: #fff; /* 白色背景 */
  min-height: 100px;
}

.code-input-box {
  display: flex;
  gap: 10px; /* 格子之间的间距 */
}

.code-input {
  width: 50px;
  height: 50px;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  color: #333; /* 深灰色文字，白色背景下更明显 */
  background-color: #f0f0f0; /* 浅灰色背景 */
  border: 2px solid #999; /* 深灰色边框 */
  border-radius: 10px; /* 圆润边角 */
  transition: all 0.3s ease;
  caret-color: #333; /* 光标颜色 */
  outline: none;
}

.code-input:focus {
  background-color: #fff; /* 聚焦时背景变白 */
  border-color: #007bff; /* 聚焦时蓝色边框 */
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.3); /* 聚焦时蓝色阴影 */
}

.code-input.filled {
  background-color: #e6f0ff; /* 填入数字时浅蓝色背景 */
  border-color: #007bff; /* 填入数字时蓝色边框 */
}

/* 抖动动画 */
.shake {
  animation: shake 0.3s ease;
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}
</style>
